<script setup lang="ts" name="passport">
import { getUrlParam } from '@/utils/ruoyi'
import MenuBar from '@/views/components/menuBar/index.vue'
import { getPassportMaxCount } from './index'
import { sendTabMessage } from '@/utils/windowTool'
import lodash from 'lodash'

const domForm = ref()

const dataForm = ref<any>({
	inchType: undefined,
	inchName: undefined,
	paper: undefined,
	passportCount: 1
})

let _passportCount = 0

const close = () => {
	window.ipcRenderer.send('GENERAL-BAR-OPERATE', { mark: 'close' })
}

const handlePaperChanged = () => {
	//监听到纸张规格变化，计算容纳照片数量
	_passportCount = getPassportMaxCount(dataForm.value.paper, dataForm.value.inchType)
	dataForm.value.passportCount = _passportCount
}

const handleSubmit = () => {
	domForm.value.validate((valid: boolean) => {
		if (valid) {
			sendTabMessage('passport', lodash.cloneDeep(dataForm.value))
			close()
		}
	})
}

onMounted(() => {
	const inchType = getUrlParam('i')
	dataForm.value.inchType = inchType
	dataForm.value.inchName = inchType==='Inch1'?'1寸照片':'2寸照片'

})
</script>
<template>
	<MenuBar title="排版设置" barColor="#222" hideLogo hideMaximize hideMinimize />
	<div class="main-content passport">
		<el-form ref="domForm" :model="dataForm" label-width="auto" class="rw-90 m-auto m-c-15-0">
			<el-form-item label="照片尺寸">
				<el-input v-model="dataForm.inchName" readonly />
			</el-form-item>
			<el-form-item label="纸张规格" prop="paper" required>
				<el-select v-model="dataForm.paper" placeholder="请选择纸张规格" @change="handlePaperChanged">
					<el-option label="A4" value="A4" />
					<el-option label="A5" value="A5" />
					<el-option label="A6" value="A6" />
				</el-select>
			</el-form-item>
			<el-form-item label="照片数量" required>
				<el-input v-model="dataForm.passportCount" onkeyup="value=value.replace(/^0+/g, '').replace(/[^\d]/g,'')" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit">确定</el-button>
				<el-button type="info" @click="()=>close()">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<style lang="scss">
.main-content.passport {
	width: 100vw;
	height: calc(100vh - 40px);
	background-color: #FFF;
	overflow: hidden;
}
</style>
